<template>
	<view class="personalpage">
		<view class="bg">
			<view class="top">
				<view class="top-icon">
					<view class="iconfont iconprev" @click="clickBack"></view>
					<view class="top-icon-right">
						<view class="iconfont iconjinbi" @touchstart="touchstartIcon(1)" @touchend="touchendIcon" :style="{color:(iconColor == 1 ? '#FE6440' : '')}"></view>
						<view class="iconfont iconlingdang" @touchstart="touchstartIcon(2)" @touchend="touchendIcon" :style="{color:(iconColor == 2 ? '#FE6440' : '')}"></view>
						<view class="iconfont iconshezhi" @touchstart="touchstartIcon(3)" @touchend="touchendIcon" :style="{color:(iconColor == 3 ? '#FE6440' : '')}"></view>
					</view>
				</view>
				<view class="personal-profile">
					<view class="personal-profile-left">
						<image src="../../static/img/user/man.png" class="personal-profile-portrait" />
					</view>
					<view class="personal-profile-right">
						<view class="personal-profile-name">{{this.users.petName}}</view>
						<view class="personal-profile-label">
							<view class="personal-profile-labels" v-for="(item, index) in this.authentication" :key="index" :style="{backgroundColor: item.color,color: item.fontColor}">
								<view class="iconfont iconvv01"></view>
								<text>{{item.content}}</text>
							</view>
						</view>
						<view class="personal-profile-profile">{{this.users.briefIntroduction}}</view>
					</view>
				</view>
				<view class="attentionAndfans">
					<view class="attention">
						<view class="attentions">
							<text>关注</text>
							<text>{{this.follow.follow.length}}</text>
						</view>
					</view>
					<view class="fans">
						<view class="fanss">
							<text>粉丝</text>
							<text>{{this.fans.fans.length}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="bottombg">
					<view class="bottom-top">
						<view class="bottom-top-border"></view>
						<view class="bottom-top-content">
							<view class="bottom-top-content-postcount">
								<view class="post">帖子</view>
								<view class="count">({{this.dynamics.dynamics.length}})</view>
							</view>
							<view class="iconfont iconsousuo"></view>
						</view>
					</view>
					<view class="dynamic">
						<view class="dynamics">
							<view class="dynamics-top">
								<view class="user">
									<view class="head-portrait">
										<image :src="this.users.portrait" class="head-portraits"/>
									</view>
									<view class="qita">
										<view class="username">{{this.users.petName}}</view>
										<view class="data">10月1日&nbsp星期四</view>
									</view>
								</view>
								<view class="more">
									<view class="mores"></view>
									<view class="mores"></view>
									<view class="mores"></view>
								</view>
							</view>
							<view class="dynamic-content">
								<view class="dynamic-contents">{{this.dynamics.dynamics[0].content}}</view>
								<view class="dynamic-contentImg">
									<view class="dynamic-contentImgs">
										<image src='../../static/img/dynamics/111.png' class="dynamic-contentImage1" />
									</view>
									<view class="dynamic-contentImgs">
										<image src='../../static/img/dynamics/111.png' class="dynamic-contentImage1" />
									</view>
								</view>
								<view class="dynamic-contentLabel">
									<view class="dynamic-contentLabels">
										<text class="ctrl3">#</text>
										<text>{{this.dynamics.dynamics[0].label}}</text>
										<text class="ctrl3">#</text>
									</view>
								</view>
							</view>
							<view class="dynamic-bottom">
								<view class="browse">
									<view class="iconfont iconzhengyanyanjing"></view>
									<text class="comments">{{this.dynamics.dynamics[0].browse}}</text>
								</view>
								<view class="dynamic-bottom-right">
									<view class="comment">
										<view class="iconfont iconpinglun"></view>
										<text class="commentss">{{this.dynamics.dynamics[0].comment}}</text>
									</view>
									<view class="fabulous">
										<view class="iconfont iconzan-copy" :style="cFabulous ? 'color: #FE6440;' : ''" @click="clickFabulous1"></view>
										<text class="comments" :style="cFabulous ? 'color: #FE6440;' : ''">{{this.dynamics.dynamics[0].fabulous}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import app from '../../App.vue'
import utils from '../../utils/util.js'
export default{
	name: 'PersonalPage',
	data() {
		return {
			currentIndex: 0,
			cFabulous: false,
			sFabulous: false,
			iconColor: 0,
			users: [],
			dynamics: [],
			follow:[],
			fans:[],
			authentication: [{
				content: '官方人员',
				color: '#FFDFD8',
				fontColor: '#FE6440'
			},
			{
				content: 'ROM制作',
				color: '#E1F6FF',
				fontColor: '#7DD7FF'
			}]
		}
	},
	onShow() {
		let tokenList = utils.getStorageData("token");
		this.$store.commit('setToken',tokenList.username);
		this.userId = this.$store.state.userId;
		this.users = utils.getStorageData(this.userId+'userInfo');
		console.log(this.users);
		this.dynamics = utils.getStorageData(this.userId+'dynamics');
		// console.log(this.dynamics);
		this.follow = utils.getStorageData(this.userId+'follow');
		// console.log(this.follow.follow);
		this.fans = utils.getStorageData(this.userId+'fans');
		// console.log(this.fans.fans);
	},
	methods: {
		clickFabulous1() {
			this.cFabulous = !this.cFabulous;
			if(this.cFabulous == true)
			{
				this.dynamics.dynamics[0].fabulous ++;
			}else{
				this.dynamics.dynamics[0].fabulous --;
			}
		},
		clickBack() {
			uni.navigateBack({
			    delta: 1
			});
		},
		touchstartIcon(e)
		{
			this.iconColor = e;
		},
		touchendIcon() {
			if(this.iconColor == 1)
			{
				uni.navigateTo({
					url: '/pages/pointSmall/PointSmall',
					success() {
						console.log('ok');
					}
				});
			}
			this.iconColor = 0;
		}
	}
}
</script>

<style>
	.bg{
		width: 100%;
		position: absolute;
		background: url(../../static/img/bg.jpg) no-repeat;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-size: cover;
	}
		.top{
			/* background-color: #007AFF; */
			height: 250px;
			margin: 0 15px 0 15px;
			position: relative;
		}
			.top-icon{
				height: 65px;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
			}
				.iconprev{
					color: #fff;
					font-size: 28px;
				}
				.top-icon-right{
					width: 115px;
					height: 30px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #fff;
				}
				.iconjinbi{
					font-size: 20px;
				}
				.iconlingdang{
					font-size: 23px;
				}
				.iconshezhi{
					font-size: 22px;
					font-weight: 600;
				}
			.personal-profile{
				height: 120px;
				display: flex;
				align-items: flex-end;
			}
				.personal-profile-portrait{
					height: 85px;
					width: 85px;
					border-radius: 50%;
				}
				.personal-profile-right{
					height: 95px;
					margin-left: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
					.personal-profile-name{
						color: #fff;
						font-size: 22px;
						letter-spacing: 0.6px;
					}
					.personal-profile-label{
						display: flex;
					}
						.personal-profile-labels{
							height: 18px;
							width: 80px;
							border-radius: 15px;
							font-size: 12px;
							display: flex;
							align-items: center;
							margin-right: 5px;
						}
						.iconvv01{
							margin-left: 4px;
						}
					.personal-profile-profile{
						color: #fff;
						font-size: 14px;
						margin-bottom: 5px;
						letter-spacing: 0.5px;
					}
			.attentionAndfans{
				height: 65px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
				.attention{
					width: 130px;
					display: flex;
					justify-content: flex-end;
				}
					.attentions{
						color: #fff;
					}
						.attentions > text {
							margin-left: 10px;
						}
				.fans{
					width: 160px;
				}
					.fanss{
						width: 80px;
						color: #fff;
					}
						.fanss > text {
							margin-left: 10px;
						}
		.bottom{
			background-color: #fff;
			height: 417px;
			border-radius: 40rpx 40rpx 0 0;
		}
			.bottombg{
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
			}
				.bottom-top{
					margin: 0 10px;
					height: 52px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;
				}
					.bottom-top-border{
						width: 35px;
						height: 3px;
						background-color: #E2E2E2;
						border-radius: 15px;
						margin-top: 10px;
					}
					.bottom-top-content{
						height: 30px;
						width: 330px;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
						.bottom-top-content-postcount{
							display: flex;
							font-size: 15.5px;
							align-items: center;
							color: #717171;
							letter-spacing: 1px;
							font-weight: 550;
						}
							.count{
								margin-left: 5px;
							}
						.iconsousuo{
							font-size: 21px;
							color: #717171;
							font-weight: 600;
						}
				.dynamic {
					width: auto;
					margin-top: 20rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
					.dynamics{
						/* height: 280px; */
						margin-top: 10rpx;
						border: 1px solid rgb(239,239,239,0.5);
						border-radius: 20rpx;
					}
					.dynamics-top{
						height: 90rpx;
						margin-left: 12rpx;
						margin-right: 12rpx;
						display: flex;
						justify-content: space-between;
					}
					.user{
						width: 275rpx;
						height: 90rpx;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
					}
					.more{
						color: #9C9C9C;
						height: auto;
						width: 32rpx;
						margin: 40rpx 20rpx 20rpx 0;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
					}
					.mores{
						background-color: #9C9C9C;
						height: 3px;
						width: 3px;
						border-radius: 50%;
					}
					.head-portrait{
						height: 35px;
						width: 35px;
					}
					.head-portraits{
						height: 70rpx;
						width: 70rpx;
						border-radius: 50%;
					}
					.qita{
						margin-left: 20rpx;
					}
					.username{
						font-size: 15.5px;
						font-weight: 550;
						color: #FE6440;
					}
					.data{
						font-size: 12px;
						color: #9C9C9C;
					}
					.dynamic-content{
						margin: 10px 5px 0 5px;
					}
					.dynamic-contents{
						font-size: 16px;
						font-weight: 600;
						margin-bottom: 4px;
					}
					.dynamic-contentImg{
						display: flex;
						flex-wrap: wrap;
					}
					.dynamic-contentImage1{
						margin-right: 5px;
						margin-top: 2px;
						height: 95px;
						width: 150px;
						border-radius: 5px;
					}
					.dynamic-contentImage2{
						margin-right: 5px;
						margin-top: 2px;
						height: 95px;
						width: 100px;
						border-radius: 5px;
					}
					.dynamic-contentLabel{
						display: flex;
						border-bottom: 1px solid rgb(239,239,239,0.5);
					}
					.dynamic-contentLabels{
						margin-right: 10px;
						margin-top: 5px;
						height: 24px;
						width: 80px;
						background-color: #FFEFEB;
						border-radius: 10px;
						font-size: 14px;
						color: #FE6440;
						font-weight: 550;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.ctrl3{
						font-size: 13px;
					}
					.dynamic-bottom{
						height: 20px;
						margin: 5px 20px 0 5px;
						display: flex;
						justify-content: space-between;
					}
					.browse{
						width: 46px;
						height: 20px;
						display: flex;
						align-items: center;
					}
					.commentss{
						font-size: 13px;
						color: #9C9C9C;
						margin-left: 5px;
					}
					.comments{
						font-size: 13px;
						color: #9C9C9C;
						margin-left: 0.1px;
					}
					.dynamic-bottom-right{
						width: 110px;
						height: 20px;
						display: flex;
						justify-content: space-between;
					}
					.comment{
						width: 45px;
						display: flex;
						align-items: center;
					}
					.fabulous{
						width: 45px;
						display: flex;
						align-items: center;
					}
					.fabulousColor{
						color: #FE6440;
					}
					.iconzhengyanyanjing,.iconzan-copy{
						font-size: 21px;
						color: #9C9C9C;
					}
					.iconpinglun{
						font-size: 15px;
						font-weight: 600;
						color: #9C9C9C;
					}
</style>
